<template>
  <!-- 穿透设置 -->
  <div class="penetration-settings">
    <el-input v-model="input2">
      <template #append>
        <el-button
          text
          @click="handleOpenPenetrationDrawer"
          :disabled="
            !Object.values(currentValue.setups.associatedDatasets).length
          "
        >
          ...</el-button
        >
      </template>
    </el-input>
    <bi-drawer v-model:drawer="penetrationDrawer" :show-close="false">
      <!-- 111-------- {{ formData }}---{{ checkedXAndY }} -->

      <template #header>
        <h3>穿透设置</h3>
      </template>

      <!-- 222 {{ currentValue }} -->
      <el-form
        ref="ruleFormRef"
        :model="formData"
        :rules="rules"
        label-width="120px"
        class="penetration-settings-form"
      >
        <el-form-item label="穿透动作">
          <el-select v-model="formData.events" placeholder="" clearable>
            <el-option
              v-for="item in penetratingActionOptions"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 1--- {{ penetrationCheckListOptions }} -->
        <el-form-item label="穿透显示列表">
          <el-checkbox-group
            v-model="formData.checkList"
            class="table-name-area"
          >
            <el-checkbox
              v-for="(item, index) in penetrationCheckListOptions"
              :key="index"
              :label="item"
              >{{ item.label }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <!-- </el-drawer> -->
    </bi-drawer>
  </div>
</template>

<script setup>
import { reactive, ref, computed, toRefs, watch } from 'vue';
import { penetratingActionOptions } from '../constants';
import useDataSet from '@/views/design-center/store/data-set';

const useDataSetStore = useDataSet();

const { currentDataSetWords } = toRefs(useDataSetStore);

const emit = defineEmits(['update-form-data']);
const props = defineProps({
  currentValue: {
    type: Object,
    default: () => {}
  },
  penetrationSettings: {
    type: Object,
    default: () => {}
  },
  checkedXAndY: {
    type: Array,
    default: () => []
  }
});
const { checkList = [] } = toRefs(props.penetrationSettings);

const input2 = ref('');
input2.value = checkList.value?.map((item) => item.label).join(',') ;

const penetrationDrawer = ref(false);

const formData = ref({
  events: 'doubleClick',
  checkList: []
});
//赋予修改的详情初始值
if (checkList.value?.length) {
  formData.value.checkList = checkList.value;
} else {
  // debugger;
  formData.value.checkList = [...props.checkedXAndY];
}

watch(
  () => props.checkedXAndY,
  () => {
    formData.value.checkList = [...props.checkedXAndY];
  }
);

const rules = reactive({});

const penetrationCheckListOptions = computed(() => {
  return currentDataSetWords.value.map((item) => {
    return {
      label: item.columnAnotherName || item.columnName,
      value: item.columnName
    };
  });
});

watch(
  () => penetrationDrawer.value,
  (nv) => {
    if (!nv) {
      input2.value = formData.value.checkList
        ?.map((item) => item.label)
        .join(',');
      !nv && emit('update-form-data', 'penetrationSettings', formData.value);
    }
  }
);
const handleOpenPenetrationDrawer = () => {
  penetrationDrawer.value = true;
};
</script>
<style scoped lang="scss">
.penetration-settings {
  .header {
    display: flex;
    align-items: center;
  }
  :deep(.el-form-item) {
    margin-bottom: 0.25rem;
  }
  :deep(.el-checkbox-group) {
    display: flex;
    flex-direction: column;
  }
  .table-name-area {
    overflow-y: auto;
    border: 0.01rem solid #ccc;
    width: 100%;
    padding: 0.16rem;
  }
  .penetration-settings-form {
    padding: 0.25rem;
  }
}
</style>
